import { useOutlet, useNavigate } from "react-router-dom";
import viteLogo from "../../public/vite.svg";
import { useEffect, useState } from "react";
import { Layout, Menu, theme } from "antd";
import { getMenuApi } from "./apis";
import createTreeList from "@/utils/treeList";
const { Header, Sider, Content } = Layout;

export const Layouts = () => {
  const outlet = useOutlet();
  const navigate = useNavigate();
  const [menus, setMenus] = useState([]);
  const getMenu = async () => {
    const res = await getMenuApi();
    if (!res.data.success) return;
    console.log(res.data);
    setMenus(res.data.data);
    sessionStorage.setItem('menuList', JSON.stringify(res.data.data))
  };

  useEffect(() => {
    getMenu();
  }, []);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout style={{ height: "100%" }}>
      <Sider trigger={null} collapsible>
        <div
          style={{
            display: "flex",
            justifyContent: "start",
            alignItems: "center",
          }}
        >
          <img src={viteLogo} style={{ margin: 4, padding: 4 }} />
          <span
            style={{
              color: "#eee",
              lineHeight: "40px",
              fontSize: 15,
              fontWeight: "bold",
            }}
          >
            综合平台
          </span>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["1"]}
          onClick={(e) => navigate(e.keyPath[0])}
          items={createTreeList(menus.map(item => {
            return {
              ...item,
              key: item.url
            }
          }), 0)}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
            height: "50px",
          }}
        />
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          {outlet}
        </Content>
      </Layout>
    </Layout>
  );
};
